<template>
    <div>
        <!-- 三级分类列表 -->
        <category :show="show"></category>

        <!-- 数据展示 -->
        <el-card v-show="show==0" shadow="always" :body-style="{ padding: '20px' }" style="margin:10px 0;">
            <!-- 添加SPU按钮 -->
            <el-button type="primary" size="default" :icon="Plus" @click="addSpu" :disabled="!categoryStore.c3Id">添加SPU</el-button>
            <!-- 表格展示数据 -->
            <el-table border stripe style="margin:10px 0;" :data="spuList.records" v-loading="loading"
                element-loading-text="玩命加载中..." element-loading-background="rgba(122, 122, 122, 0.1)">
                <el-table-column label="序号" width="80" align="center" type="index"></el-table-column>
                <el-table-column label="SPU名称" prop="spuName"></el-table-column>
                <el-table-column label="SPU描述" prop="description"></el-table-column>
                <el-table-column label="SPU操作">
                    <template #="{row,$index}">
                        <el-button title="添加SKU" type="primary" size="small" :icon="Plus" @click="addSku(row)"></el-button>
                        <el-button title="修改SPU" type="primary" size="small" :icon="Edit" @click="updateSpu(row)"></el-button>
                        <el-button title="查看SKU" type="info" size="small" :icon="InfoFilled" @click=""></el-button>
                        <el-button title="删除SPU" type="danger" size="small" :icon="Delete" @click=""></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination @current-change="getSpuList" @size-change="sizeHandler" v-model:current-page="currentPage"
                :page-sizes="[1,2,3,4,5]" v-model:page-size="pageSize"
                layout=" prev, pager, next, jumper,->,sizes,total" :total="spuList.total" background :pager-count="7">
            </el-pagination>
        </el-card>

        <!-- 切换添加/修改SPU场景 -->
        <Spu v-show="show==1" @changeShow="changeHandler" ref="spuRef"></Spu>
        <!-- 切换添加SKU场景 -->
        <Sku v-show="show==2" ref="skuRef" @changeShow="changeHandler"></Sku>
    </div>
</template>

<script setup lang="ts">
import Spu from './addOrUpdateSpu.vue'
import Sku from './addSku.vue'
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
    Plus,
    InfoFilled
} from '@element-plus/icons-vue'

import { ref, watch } from "vue";
// 引入三级分类的仓库
import useCategoryStore from '@/stores/category'
import { reqSpuList } from '@/api/product/spu/spu';
let categoryStore = useCategoryStore()
// 定义当前第几页
let currentPage = ref<number>(1)
// 定义一页展示几条
let pageSize = ref<number>(2)
// 控制有无加载效果
let loading = ref<boolean>(false)
// 切换场景
let show = ref<number>(0)
// 存储SPU数据
let spuList = ref({})
// 存储子组件spu的实例
let spuRef = ref<any>()
// 存储子组件sku的实例
let skuRef = ref<any>()

// 监听三级分类id的变化 发生变化就发请求
watch(
    () => categoryStore.c3Id,
    () => {
        // spuList.value = []
        if (categoryStore.c3Id == '') return
        getSpuList()
    }
)

// 获取spu数据列表
const getSpuList = async (page:number=1) => {
    currentPage.value = page
    loading.value = true
    let result = await reqSpuList(currentPage.value, pageSize.value, categoryStore.c3Id)
    console.log(result);
    spuList.value = result
    loading.value = false
}

// 设置一页显示几条数据
const sizeHandler = (limit:number)=>{
    pageSize.value = limit
    getSpuList()
}

// 点击添加SPU按钮
const addSpu = () => {
    show.value = 1
    spuRef.value.initAddSpu(categoryStore.c3Id)
}

// 点击修改SPU按钮
const updateSpu = (hasSpu) => {
    show.value = 1
    // console.log(spuRef);
    // console.log(hasSpu)
    // 获取子组件的实例：调用子组件的方法
    spuRef.value.getSpuAllInfo(hasSpu)   
}

// 接收子组件自定义事件的回调
const changeHandler = ({shows,flag}) => {
    show.value = shows
    // 重新获取列表
     //当前是添加
     if(flag=='add'){
      //再次获取最新全部SPU的数据
      getSpuList();
    }else{
      //当前是修改
      getSpuList(currentPage.value);
    }
}
//点击添加SKU按钮
const addSku = (row) =>{
    show.value = 2
    skuRef.value.initSku(categoryStore.c1Id,categoryStore.c2Id,row)
    console.log(row);
    
}

</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
    
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>